import React, {useState, useEffect, useRef} from 'react';
import { connect } from "react-redux";
import {  useNavigate } from "react-router-dom";
import Lazyload from 'react-lazyload';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { withTranslation,useTranslation } from "react-i18next";
import { Button, Space } from 'antd';
import { Swiper, SwiperSlide } from 'swiper/react';
import { useInView } from "react-intersection-observer";
import Lottie from "lottie-react";
import CountUp from 'react-countup';

import I18nBtn from '@/i18n/i18nBtn';
import request from "@/utils/ajax/request";
import actions from "@/store/actions";
import CountHooks from '@/components/count/counter.js';
import {GetBaidu,BaiduTrackPageview,GeiBaiDuOnClick} from "@/utils/BaiDuTongJi/GetBaidu";
import ScrollToTops from "@/components/ScrollToTop";
import 'swiper/css';
import Css from '@/assets/css/Pc/index.module.css';
import dataJson from '@/assets/lottieJson/data.json';
import Icon from "@/components/Icon";
const Index = (props) =>{
    const {dispatch} = props;
    //加载百度统计代码
    GetBaidu(props);
    //百度统计页面url
    BaiduTrackPageview(window.base.config.path)
    //百度统计按钮点击
    const OnClickGeiBaiDu = (nav,click,literature) =>{
        GeiBaiDuOnClick(nav,click,literature)
    }
    //滑动页面，顶部导航固定
    const [refTopNav,topNavInView] = useInView();
    // console.log(navInView)
    //数据
    const [gData, setGData] = useState();
    const [pData, setPData] = useState();
    // 中英文获取切换
    const { t ,i18n } = useTranslation();
    //路由切换
    const navigate = useNavigate();
    //mock获取拦截数据
    const getDate1 = () => {
        let Url = `${window.base.config.baseUrl}home/category/menu?token=1ec949a15fb709370f`;
        request(Url,'get').then((res)=>{
            // console.log(res)
            setGData(res.message)
        })
    }
    //mock获取拦截数据
    const getDate2 = () => {
        request('/postdata1','post',{
            params: {
                name: 'jack'
            }
        }).then((res)=>{
            console.log(res)
            setPData(res.message)
        })
    }
    // https://www.guanaitong.com/news-limit-3
    //获取新闻数据
    const [dataNews ,setDataNews] = useState([])

    const getNewsData = () => {
        let Url = window.base.config.baseGatNewsUrl+'news-limit-3.json';
        request(Url,'get').then((res)=>{
            setDataNews(res.data.list1)
        })
    }
    //跳转页面
    const onClickGoPages = (Url) => {
        // console.log(Url)
        navigate(Url);
    }
    //lottie动画
    const [refLottie,refLottieInView] = useInView({
        rootMargin: '-200px',
    });
    const lottieRef = useRef();


    //hooks周期函数
    useEffect(()=>{
        dispatch(actions.reduxAction.getNav());
    },[dispatch]);
    useEffect(()=>{
        dispatch(actions.actTopNav.actTopNav(topNavInView))
    },[dispatch,topNavInView]);
    useEffect(()=>{
        getNewsData();
    },[])
    useEffect(()=>{
        if (refLottieInView){
            lottieRef.current.play()
        }else {
            lottieRef.current.pause()
        }
    },[refLottieInView])

    return(
        <div>
            <HelmetProvider>
                <Helmet>
                    <title>111关于我们-中智关爱通</title>
                    <meta name="keywords" content="企业福利平台,企业福利定制,节日福利礼品,员工礼品供应商" />
                    <meta name="description" content="关爱通是中智旗下品牌，央企服务保证，为企业提供完整员工福利解决方案、企业福利平台定制、节日福利、员工礼品、员工激励、员工体检，以及一站式员工弹性福利平台。关爱通服务客户超21000家，覆盖员工近700万人。" />
                </Helmet>
            </HelmetProvider>
            <div>
                {dataNews&&dataNews.length>0&&dataNews.map((item,index)=>{
                    return(
                        <div key={index}>{item.cat_name}</div>
                    )
                })}
            </div>
            <div>
                <Icon
                    className={Css["topNavIcn"]}
                    type="icon-gatmgrxiugai"
                />
            </div>
            <div className={Css.box1} ref={refTopNav}>PC首页</div>
            <CountUp
                start={0}
                end={123}
                duration={6}
                redraw={true}
                useEasing={false}
                enableScrollSpy={true}
                scrollSpyOnce={true}
            />

            <div ref={refLottie} style={{width:'300px',height:'300px'}}>
                <Lottie
                    lottieRef={lottieRef}
                    animationData={dataJson}
                    loop={true}
                />
            </div>
            <div  className={Css.box}>{t("Pc.title")}</div>
            <Space wrap>
                <I18nBtn i18n={i18n} />
                <Button type="dashed" onClick={onClickGoPages.bind(this,'login')}>oAuth</Button>
                <Button type="text">Text Button</Button>
                <Button type="link"  onClick={onClickGoPages.bind(this,'personal')}>Link Button</Button>
            </Space><br />
            <CountHooks />
            <Swiper
                spaceBetween={50}
                slidesPerView={3}
            >
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>
            </Swiper>
            <br />
            <h3>数据展示</h3>
            <p>get：{ gData === null ? '无' : gData }</p>
            <p>post: { pData == null ? '无' :  pData } </p>
            <button onClick={getDate1}>点击获取(Get)Mock数据</button>
            <br /><br />
            <button onClick={getDate2 } >点击获取(Post)Mock数据</button>
            <br/>
            <br/>
            <Button onClick={onClickGoPages.bind(this,'test')}>跳转test</Button>
            <Button onClick={onClickGoPages.bind(this,'test1')}>跳转test1</Button>
            <br/>
            <br/>
            <div onClick={OnClickGeiBaiDu.bind(this,'nav', 'click', 'literature')} >文学</div>
            <div style={{height:'500px',background:'#ffff00'}}></div>
            <div className="widget-list image-container">
                <Lazyload throttle={200} height={300}>
                    <img src={require('@/assets/images/1.jpg')} alt=''/>
                </Lazyload>
                <Lazyload throttle={200} height={300}>
                    <img src={require('@/assets/images/2.jpg')} alt='' style={{width:'500px'}}/>
                </Lazyload>
                <Lazyload throttle={200} height={300}>
                    <img src={require('@/assets/images/3.jpg')} alt=''/>
                </Lazyload>
            </div>
            <div style={{height:'500px',background:'#ff0'}}></div>
            <ScrollToTops />
        </div>
    )
}
export default connect((state)=>{
    return {
        state: state,
    };
})(withTranslation()(Index));